區塊的劃分：<div> 和 <span> 的用法

2025 iThome 鐵人賽

DAY 8

自我挑戰組

網頁設計自我挑戰 - 從零開始系列第 8 篇

17th鐵人賽區塊元素行內元素

Bao

2025-08-15 01:20:53

160 瀏覽

分享至

隨著網頁內容越來越多，需要一些容器來將它們分組，這樣才能更好地管理和排版。今天學習 HTML 中最常見的兩個容器標籤：<div> 和 <span>。

<div> (Division)： 區塊元素（Block-level element）。
- 它會獨佔一行，自動換行。
- 通常用來包裝一組相關的內容，如網站的導覽列、主要內容區、頁腳等。
- div 本身沒有任何樣式，是純粹的結構性標籤。
<span> (Span)： 行內元素（Inline element）。
- 它不會獨佔一行，而是跟隨在其他內容後面。
- 通常用來包裝一小段文字，並為其加上特定的樣式，例如改變某個詞的顏色。

讓個人簡介頁面劃分為幾個區塊，使用 <span> 標籤來強調某些文字。
在 index.html 中修改：

HTML
<body>
  <div class="header">
    <h1>小包</h1>
  </div>

  <div class="main-content">
    <img src="https://picsum.photos/300/300" alt="小包的頭像" />
    <p>嗨，我是小包，一個熱愛 <span class="highlight">網頁設計</span> 的學生。我喜歡追劇、聽音樂和寫程式。我希望透過這個 30 天挑戰，能讓自己成為一個更好的網頁開發者。</p>
  </div>

  <div class="footer">
    <p>你可以透過 <a href="https://github.com/pao-chi-hao">我的 GitHub</a> 找到我。</p>
  </div>
</body>

<head>
  <link rel="stylesheet" href="style.css" />
</head>

在 style.css 中加入：

CSS
.header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}
.highlight {
  color: #e74c3c;
  font-weight: bold;
}
.footer {
  text-align: center;
  padding: 10px;
  background-color: #bdc3c7;
}

透過 <div> 和 <span>，讓網頁結構變得更清晰了，而且每個區塊都有獨立的樣式。明天要利用這些概念，來製作一個網頁最重要的元素之一：導覽列！

執行成果 :